<template>
  <view style="margin: 0;padding: 0;">
    <uni-card padding="0" spacing="0" margin="0" is-full="true">
      <template v-slot:cover>
        <view class="custom-cover">
          <image class="cover-image" mode="aspectFill" :src="goodsDetail.img" style="width: 100%;height: 600rpx;">
          </image>
          <text class="g-text-price" style="font-size: 28rpx;color: orangered;">￥</text>
          <text class="g-text-price"
            style="color: orangered;font-size: 40rpx;margin-left: 5rpx;">{{goodsDetail.price}}</text>
          <text class="g-text-price"
            style="font-size: 28rpx;color:#666666;margin-left: 15rpx;">剩余库存：{{goodsDetail.store}}</text>
          <view class="cover-content">
            <text class="g-gf">官方正品</text>
            <text class="uni-subtitle uni-white" style="font-size: 40rpx;margin-left: 20rpx;">
              {{goodsDetail.name}}</text>
          </view>
        </view>
      </template>
    </uni-card>
    <uni-card padding="15rpx" spacing="0" margin="20rpx">
      <text class="g-content">{{goodsDetail.introduction}}</text>
    </uni-card>
    <view style="display: flex;justify-content: space-between;">
      <view class="g-content">购买数量 <text style="font-size: 20rpx;margin-left: 10rpx;color:#666666;">有货</text></view>
      <uni-number-box v-model="form.num" @blur="blur" @focus="focus" background="#e2e0d9" @change="changeValue" />
    </view>
    <view class="goods-carts">
      <view style="display: flex;justify-content: space-between;">
        <view class="g-content"></view>
        <text style="color: orangered;margin-right: 20rpx;">价格￥:{{(form.num*goodsDetail.price).toFixed(2)}}</text>
      </view>
      <uni-goods-nav :options="options" v-model="form.num" :fill="true" :button-group="buttonGroup" @click="onClick"
        @buttonClick="buttonClick" />
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        user: undefined,
        form: {
          num: 1,
        },
        goodsDetail: [],
        extraIcon: {
          color: '#4cd964',
          size: '22',
          type: 'gear-filled'
        },
        options: [{
          icon: 'chat',
          text: '客服'
        }, {
          icon: 'shop',
          text: '店铺',
          info: 0,
          infoBackgroundColor: '#007aff',
          infoColor: "#f5f5f5"
        }, {
          icon: 'cart',
          text: '购物车',
          info: 0
        }],
        buttonGroup: [{
            text: '加入购物车',
            backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
            color: '#fff'
          },
          {
            text: '立即购买',
            backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
            color: '#fff'
          }
        ],
        customButtonGroup: [{
            text: '加入购物车',
            backgroundColor: 'linear-gradient(90deg, #1E83FF, #0053B8)',
            color: '#fff'
          },
          {
            text: '立即购买',
            backgroundColor: 'linear-gradient(90deg, #60F3FF, #088FEB)',
            color: '#fff'
          }
        ],
        customButtonGroup1: [{
          text: '立即购买',
          backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
          color: '#fff'
        }],
      }
    },
    onLoad(option) {
      this.user = uni.getStorageSync('user')
      const id = option.id;
      this.load(id);
      this.loadCount()
    },
    methods: {
      load(id) {
        this.request({
          url: '/goods/' + id,
          method: 'GET'
        }).then(res => {
          this.goodsDetail = res.data
        })
      },
      loadCount() {
        this.request({
          url: '/carts/count',
          method: 'GET'
        }).then(res => {
          this.options[2].info = res.data
        })
      },
      onClick(e) {
        console.log("方法执行了")
        if (e.index == 0) {
          console.log("联系客服");
        }
        if (e.index == 1) {
          console.log("浏览更多");
        }
        if (e.index == 2) {
          console.log("查看我的购物车");
        }
      },
      buttonClick(e) {
        if (e.index == 0) {
          this.addCart()
          console.log("加入购物车");
        }
        if (e.index == 1) {
          console.log("立即购买");
        }
        this.loadCount()
      },
      actionsClick(text) {
        uni.showToast({
          title: text,
          icon: 'none'
        })
      },
      //购买数量
      change(value) {
        this.numberValue = value
      },
      changeValue(value) {
        console.log('返回数值：', value);
      },
      blur(e) {
        console.log('blur:', e);
      },
      focus(e) {
        console.log('focus:', e);
      },
      //用户加入购物车操作
      addCart() {
        if (!this.user.userName) {
          uni.showToast({
            icon: "error",
            title: "请先登录"
          })
          uni.navigateTo({
            url: '/pages/my/login/login'
          })
          return false
        }
        this.form.goodsId = this.goodsDetail.id
        this.request({
          url: '/carts',
          method: 'POST',
          data: this.form
        }).then(res => {
          if (res.code === 200) {
            uni.showToast({
              icon: "success",
              title: "加入成功"
            })
          } else {
            uni.showToast({
              icon: "none",
              title: res.message
            })
          }
        })
      },
      //用户的购物车
      myCart() {
        uni.navigateTo({
          url: ''
        })
      }
    }
  }
</script>

<style lang="scss">
  .g-gf {
    font-size: 30rpx;
    color: white;
    background-color: red;
    border-radius: 10px;
    overflow: hidden;
  }

  .example-body {
    padding: 0;
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
  }

  .goods-carts {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    /* #ifdef H5 */
    left: var(--window-left);
    right: var(--window-right);
    /* #endif */
    bottom: 0;
  }
</style>
